<!--
*
* Copyright 2015 HISP Tanzania
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301, USA.
*
* @since 2015
* @author Joseph Chingalo profschingalo@gmail.com>
*
*
-->
<ion-content class="login" [style.background-color]="(colorSettings$ |async).colorCode.main">
  <div *ngIf="isLoginProcessActive" class="topSLogan logo" style="margin-bottom: 100px;" padding-bottom margin-bottom>
    <login-spinner [keyFlag]="keyFlag" [serverUrl]="currentUser.serverUrl" [applicationTitle]="applicationTitle"
      [keyApplicationFooter]="keyApplicationFooter" [keyApplicationIntro]="keyApplicationIntro"
      [keyApplicationNotification]="keyApplicationNotification"></login-spinner>
  </div>
  <div margin padding-top *ngIf="isLoginProcessActive">
    <login-metadata-sync (systemSettingLoaded)="onSystemSettingLoaded($event)" (updateCurrentUser)="onUpdateCurrentUser($event)"
      (failOnLogin)="onFailLogin($event)" (successOnLoginAndSyncMetadata)="onSuccessLogin($event)" [currentUser]="currentUser"
      (cancelProgress)="onCancelLoginProcess()" [overAllMessage]="overAllLoginMessage" [showOverallProgressBar]="showOverallProgressBar"
      [isOnLogin]="isOnLogin" [processes]="processes"></login-metadata-sync>
  </div>
  <ion-grid class="animated fadeIn">
    <ion-row *ngIf="!isLoginProcessActive">
      <ion-col class="topSLogan">
        <div class="logo">
          <img [src]="logoUrl">
        </div>
        <p [translate]="'Innovation in every dimension'"></p>
      </ion-col>
    </ion-row>
    <ion-row *ngIf="!isLoginProcessActive">
      <ion-col no-padding no-margin></ion-col>
      <ion-col col-auto no-padding no-margin *ngIf="currentUser">
        <ion-row>
          <ion-col>
            <login-form [currentUser]="currentUser" (onLoginFormReady)="onFormFieldChange($event)"></login-form>
          </ion-col>
        </ion-row>
        <ion-row *ngIf="!isLoginProcessActive">
          <ion-col>
            <button large [disabled]="!isLoginFormValid" ion-button full text-capitalize (click)="startLoginProcess()"
              [color]="(colorSettings$ |async).colorAttributes.secondary">
              <span [translate]="'Login'"></span>
            </button>
          </ion-col>
        </ion-row>
        <div *ngIf="localInstances && localInstances.length > 1">
          <div class="strike">
            <span [translate]="'or'"></span>
          </div>
          <button ion-button block clear color="light" text-capitalize (click)="openLocalInstancesSelection()">
            <img class="side-menu-icon" [src]="offlineIcon" />&nbsp;&nbsp;
            <span [translate]="'Available instances'"></span>
          </button>
        </div>

      </ion-col>
      <ion-col no-padding no-margin></ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="bottomSLogan">
        <p>
          <span class="translation-codes" *ngIf="currentUser">
            <span *ngFor="let code of topThreeTranslationCodes; let currentIndex = index">
              <span (click)="updateTranslationLanguage(code)" [ngClass]="(currentUser.currentLanguage === code) ?'currentLang' : ''">{{
                code }}</span>
              <span *ngIf="currentIndex < 2">&nbsp;|&nbsp;</span>
            </span>
            <span *ngIf="topThreeTranslationCodes.indexOf(currentUser.currentLanguage) === -1">
              &nbsp;|&nbsp;
              <span (click)="updateTranslationLanguage(currentUser.currentLanguage)" [ngClass]="'currentLang'">{{
                currentUser.currentLanguage }}</span>
            </span>
            <span (click)="openTranslationCodeSelection()">
              &nbsp;
              <ion-icon name="ios-more"></ion-icon>
            </span>
          </span>
        </p>
        <p>
          <span class="bottom-sLogan-title">
            <span [translate]="'powered by'"></span> HISPTZ
          </span>
        </p>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
